<!-- 商品发布 - 基础设置 -->
<template>
  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
    <div
      class="p-10px border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)] font-size-14px"
    >
      基础信息
    </div>
    <el-form-item label="付费会员名称" prop="spuName">
      <el-input
        v-model="formData.spuName"
        :clearable="true"
        :show-word-limit="true"
        class="w-80!"
        placeholder="请输入付费会员名称"
      />
    </el-form-item>

    <el-form-item label="等级图标" prop="picUrl">
      <div>
        <UploadImg v-model="formData.picUrl" :showDelete="!isDetail" width="80px" height="80px" />
      </div>
    </el-form-item>
    <el-form-item label="背景图" prop="picUrl">
      <div>
        <UploadImg
          v-model="formData.imgOblongUrl"
          :showDelete="!isDetail"
          width="170px"
          height="80px"
        />
      </div>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input-number v-model="formData.sort" :min="0" placeholder="请输入排序" class="w-80!" />
    </el-form-item>
    <el-form-item label="是否开启" prop="isOpen">
      <el-switch v-model="formData.isOpen" />
    </el-form-item>
    <el-form-item label="付费会员协议" prop="isOpen">
      <el-input v-model="payMemberProtocolName" disabled class="w-80!" />
    </el-form-item>
    <el-form-item label="销售渠道" prop="salesChannel">
      <el-checkbox-group v-model="formData.salesChannel" @change="salesChannelChange">
        <template
          v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_SALES_CHANNEL)"
          :key="dict.value"
        >
          <el-checkbox :value="dict.value" v-if="dict.value != 4">{{ dict.label }}</el-checkbox>
        </template>
      </el-checkbox-group>
    </el-form-item>
    <!-- <el-form-item
      label="线上渠道"
      prop="salesOnlineChannel"
      v-if="formData.salesChannel?.includes(2)"
    >
      <div class="w-100%">
        <el-checkbox-group v-model="formData.salesOnlineChannel">
          <el-checkbox
            v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_SALES_ONLINE_CHANNEL)"
            :key="dict.value"
            :value="dict.value"
            >{{ dict.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </el-form-item> -->
    <el-form-item label="关联门店" v-if="formData.salesChannel?.includes(1)">
      <div class="w-100%">
        <div class="p-10px w-100% border-rd-5px border-1px bg-[var(--el-color-primary-light-9)]">
          <StoreSelect v-model="formData.authorizedTenant">添加门店 </StoreSelect>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="关联商城" v-if="formData.salesChannel?.includes(2)">
      <div class="w-100%">
        <div
          class="p-10px w-100% border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)]"
        >
          <ShopSelect v-model="formData.authorizedMallTenant" :is-details="isDetail"
            >添加销售商城
          </ShopSelect>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import type { Spu } from '@/api/mall/product/spu'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
  propFormData: {
    type: Object as PropType<Spu>,
    default: () => {}
  },
  isDetail: propTypes.bool.def(false), // 是否作为详情组件
  activeName: propTypes.string.def('info')
})

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref
const formData = reactive<Spu>({
  spuType: 5,
  spuId: undefined,
  spuName: '', //商品名称
  picUrl: '', // 付费会员等级图标
  isOpen: false, //是否开启
  imgOblongUrl: '', // 付费会员背景图
  salesChannel: [], //启用渠道
  authorizedTenant: [], //门店
  authorizedMallTenant: [], //商城
  salesOnlineChannel: [], // 线上商品销售渠道
  protocolId: undefined, //付费会员协议
  sort: 0
})
const rules = reactive({
  spuType: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
  spuName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  picUrl: [{ required: true, message: '请上传等级图标', trigger: 'blur' }],
  imgOblongUrl: [{ required: true, message: '请上传背景图', trigger: 'blur' }],
  sort: [required]
})
const payMemberProtocolName = ref('')
const payMemberProtocolId = ref()
/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    // deep: true,
    immediate: true
  }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    formData.protocolId = payMemberProtocolId.value
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【基础设置】不完善，请填写相关信息')
    emit('update:activeName', 'info')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })
/** 销售渠道变化 */
const salesChannelChange = () => {
  Object.assign(props.propFormData, formData)
}
/** 初始化 */
/** 获得付费会员配置 */
import * as ConfigApi from '@/api/memberPaid/config'

const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    payMemberProtocolId.value = data.payMemberConfigId
    payMemberProtocolName.value = data.payMemberProtocolName
  } finally {
  }
}

onMounted(async () => {
  getConfig()
})
</script>
<style lang="scss" scoped>
.spu-type-box {
  border: 1px solid var(--el-color-primary);
  position: relative;
  line-height: 24px;
  .virtual_san {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid var(--el-color-primary);
    border-left: 26px solid transparent;
  }
  .virtual_dui {
    position: absolute;
    bottom: -2px;
    right: 2px;
    color: #fff;
    font-family: system-ui;
  }
}
</style>
